<script setup lang="ts">
import {useUsersStore} from "@/store/usersStroe.ts";
import {CreateUserData} from "@/api/user/types.ts";
import {ElNotification, FormInstance} from "element-plus";
import {createUser} from "@/api/user";

const userStore = useUsersStore();
const createUserFormRef = ref();
const createUserForm = reactive<CreateUserData>({
  userName: '',
  password: '',
  loginName: '',
  sex: 1,
  age: 0,
  phone: '',
  email: '',
  roles: [],
  status: 1,
  avatar: '',
})
const rules = {
  userName: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
  ],
  loginName: [
    {required: true, message: '请输入登录名', trigger: 'blur'},
    {
      pattern: /^[a-zA-Z]+$/,
      message: '登录名只能包含字母',
      trigger: 'blur'
    }
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {
      min: 6,
      max: 20,
      message: '长度在 6 到 20 个字符',
      trigger: 'blur'
    }
  ],
  age: [
    {required: true, message: '请输入年龄', trigger: 'blur'},
    //不能为负数
    {
      validator: (rule: any, value: number, callback: any) => {
        if (value < 0) {
          callback(new Error('年龄不正确'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    },
    // 必须为整数
    {
      validator: (rule: any, value: number, callback: any) => {
        if (value % 1 !== 0) {
          callback(new Error('年龄不正确'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ],
  phone: [
    {required: true, message: '请输入手机号', trigger: 'blur'},
    {
      pattern: /^1[3456789]\d{9}$/,
      message: '手机号格式不正确',
      trigger: 'blur'
    }
  ],
  email: [
    {required: true, message: '请输入邮箱', trigger: 'blur'},
    {
      pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
      message: '邮箱格式不正确',
      trigger: 'blur'
    }
  ],
  sex: [
    {required: true, message: '请选择性别', trigger: 'blur'},
  ],
  status: [
    {required: true, message: '请选择状态', trigger: 'blur'},
  ],
  roles: [
    {required: true, message: '请选择角色', trigger: 'blur'},
  ]
}
const loading = ref(false);

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  loading.value = true;
  await formEl.validate(async (valid) => {
    if (valid) {
      const res = await createUser(createUserForm);
      if (res.code === 200) {
        ElNotification({
          message: res.msg,
          type: 'success',
        })
        userStore.createUserDrawer = false;
        await userStore.getUserListFun();
        loading.value = false;
      } else {
        ElNotification({
          message: res.msg,
          type: 'error',
        })
        loading.value = false;
      }
    } else {
      loading.value = false;
    }
  })
}

</script>

<template>
  <div>
    <el-drawer title="添加用户" v-model="userStore.createUserDrawer" size="1000">
      <el-form :model="createUserForm" ref="createUserFormRef" label-position="right" label-width="80px" :rules="rules">
        <el-form-item label="登录名" prop="loginName">
          <el-input v-model="createUserForm.loginName"/>
        </el-form-item>
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="createUserForm.userName" clearable/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="createUserForm.password"/>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model.number="createUserForm.age"/>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="createUserForm.phone"/>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="createUserForm.email"/>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio v-model="createUserForm.sex" :label="1">男</el-radio>
          <el-radio v-model="createUserForm.sex" :label="2">女</el-radio>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio v-model="createUserForm.status" :label="1">启用</el-radio>
          <el-radio v-model="createUserForm.status" :label="0">禁用</el-radio>
        </el-form-item>
        <el-form-item label="角色" prop="roles">
          <el-select v-model="createUserForm.roles" multiple placeholder="请选择">
            <el-option
                v-for="item in userStore.roleList"
                :key="item.ID"
                :label="item.name"
                :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="userStore.createUserDrawer = false">取消</el-button>
          <el-button type="primary" @click="submitForm(createUserFormRef)" :loading="loading">确定</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<style scoped>

</style>
